Personalizar la descripción del blog

La descripción del blog la podemos activar en Configuración / Básico podemos añadir hasta un máximo de 500 caracteres, los estilos de las descripción vienen definimos más o menos así:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Si marcamos para expandir la plantilla de artilugios encontraríamos la descripción de esta forma:

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

La etiqueta <data:description/> es la que hace posible que se muestre el texto. Para suprimir el texto sería suficiente con eliminar esa etiqueta, aunque es algo que carece de sentido porque si no añadimos texto no se muestra.

A pesar que muchos no utilizamos descripción en el blog hay quien si lo hace y me preguntaban como podemos cambiar el tipo de letra, esto es posible hacerlo desde la herramienta fuentes y colores, si los cambios que deseamos hacer no se muestran en esa opción podemos modificar los estilos de ese texto como a cualquier otro texto del blog, color, tipo, tamaño y estilo de fuente

#header .description {
margin:0 30px 15px;
padding:13px 8px ;
max-width:700px;
letter-spacing:.2em;
line-height: 1.4em;
color:#111;
font-weight: bold;
font-size:12px;
font-family:Verdana,Tahoma,sans-serif;
}

Podemos añadir fondo con la precaución de modificar el ancho del espacio donde se encuentra el texto (max-width:700px;) de lo contrario ocuparía todo el espacio establecido.

background: transparent url(url-de-la-imagen) repeat;



Modificamos max-width:700px; y miramos en vista previa hasta conseguir el ancho deseado...


Borde con el atributo border.

border-bottom: 1px dashed #333;
border-top: 1px dashed #333;



Podemos seguir probando otros cambios.

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

Si añadimos una imagen a ambos lados de la etiqueta <data:description/>

<img src="url-imagen" /><data:description/><img src="url-imagen" />

Se mostraría así.


Aprovechar la etiqueta span y añadir ahí los estilos, incluso diferentes estilos a un mismo texto.

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span style=" font-weight:bold;font-size:14px;color:#ccc;">TEXTO </span><span style=" font-weight:bold;font-size:14px;color:#000;">TEXTO...</span>
</p>
</div>
</b:includable>